import React, { Component } from "react";
import Computed from "./computed";
import Check from "./check";

class List extends Component {
    state = { ...this.props.data }
    render() {
        let { list, typeIndex } = this.state;
        return <div className="list">
            {
                list.map((item, index) => {
                    return <dl key={index}>
                        <dt><Check typeIndex={typeIndex} listIndex={index} flg={item.listFlg} /><img src={require(`./img/${item.url}`)} alt="" /></dt>
                        <dd>
                            <p>{item.title}</p>
                            <div>
                                <p>￥<span>{item.price}</span></p>
                                <Computed data={{item,typeIndex,listIndex:index}} />
                            </div>
                        </dd>
                    </dl>
                })
            }
        </div>
    }
}

export default List;